<template>
    <div>
        <div class="bodyContent">
            <div class="bodyContentCenter">
                <el-tabs :tab-position="tabPosition" tabPosition="left">
                    <el-tab-pane label="我的主页">
                        <div id="myTabContent" class="tab-content">
                            <div class="con_Main_right tab-pane fade in active" id="one">
                                <header>个人信息</header>
                                <div class="con_Main_right_con">
                                    <div class="con_Main_right_name">
                                        <span>昵称</span>
                                        <span class="changgeWord" @click="changeName">修改</span>
                                        <p class="nam-1">{{$store.state.userInfo.nickname}}</p>
                                    </div>
                                    <div class="con_Main_right_name">
                                        <span>手机号</span>
                                        <span class="changgeWord" @click="changePhone">修改</span>
                                        <p class="phon-1">{{$store.state.userInfo.mobile}}</p>
                                    </div>
                                    <div class="con_Main_right_name">
                                        <span>密码</span>
                                        <span class="changgeWord" @click="changePassord">修改</span>
                                        <p>*******</p>
                                    </div>
                                    <div class="con_Main_right_img">
                                        <img :src="$store.state.userInfo.avatarUrl" alt="" class="photo">
                                        <br>
                                       <div class="commit">
                                           <input type="file" @change="changeImg"  ref="avatar" class="commit1">
                                           <button class="commit2">上传头像</button>
                                       </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我的课程">敬请期待</el-tab-pane>
                    <el-tab-pane label="我的订单">敬请期待</el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <personalBounced :changePhone="isChangePhone" :changeName="isChangeName" :changePassword="isChangePassword"></personalBounced>
    </div>
</template>

<script>
    // import {userMessage} from "../../../api/personal";

    import personalBounced from "./personalBounced";
    import {changeImg} from "../../../api/personal";

    export default {
        name: "personalContent",
        data(){
            return{
                tabPosition:"",
                isChangeName:false,//存放用户名修改状态
                isChangePhone:false,//存放手机号修改状态
                isChangePassword:false//存放密码修改状态

            }
        },
        components:{
            personalBounced
        },
        methods:{
            changePhone(){
                this.isChangePhone=!this.isChangePhone
                console.log(this.isChangePhone)

            },
            changeName(){
                this.isChangeName=!this.isChangeName
            },
            changePassord(){
                this.isChangePassword=!this.isChangePassword
            },
            //改头像
            changeImg(){
                console.log(this.$refs.avatar.files[0])
                changeImg(this.$refs.avatar.files[0]).then(res=>{
                    console.log(res.data.userInfo)
                    this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.data.userInfo})
                })
            }
        },
        created() {

        }
    }
</script>

<style scoped>
.bodyContent{
    overflow: hidden;
    height: 803px;
    background-color: #f4f4f4;
}
.bodyContentCenter{
    display: flex;
    position: relative;
    width: 1200px;
    height: 723px;
    margin: 35px auto;
    background-color: white;
}
/deep/
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
    height: 0;
}
.bodyContentCenter::after{
    content: "";
    position: absolute;
    top: 0;
    left: 94px;
    width: 0px;
    height: 700px;
    border-right: 1px solid #ddd;
}
/deep/.el-tabs__active-bar{
    background-color: #00cf8c;
}
/deep/.el-tabs__item:hover{
    color: #00cf8c;
}
/deep/.el-tabs__item.is-active{
    color: #00cf8c;
}
/deep/.con_Main_right.tab-pane{
    height: 800px;
}

.con_Main_left>li{
    width: 89px;
    border-right: 1px solid #ddd;
    font-size: 11px!important;
}
.con_Main_left>li{
    text-align: right;
    /* height: 60px; */
    /* padding: 15px 22px; */
}
.con_Main_left>li>a{
    font-size: 14px;
    color: black;
    text-decoration: none;
    border: none!important;
}
.con_Main_left>li>a:hover{
    background-color: white;
}
.con_Main_left>li:hover>a{
    color: #00cf8c;
    cursor: pointer;
}
.con_Main_right{
    float: left;
    padding-left: 24px;
    border: none!important;
}
.con_Main_right>header{
    font-size: 22px;
}
.con_Main_right_con{
    width: 970px;
    box-sizing: border-box;
    padding: 40px;
    font-size: 20px;
}
.con_Main_right_name{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.con_Main_right_name>span,
.con_Main_right_name>p{
    font-size: 20px;
    font-weight: 400;
    color: #333;
}
.con_Main_right_name>a{
    font-size: 14px;
    color: #00cf8c;
}
.con_Main_right_name>p{
    margin-top:5px ;
    line-height: 40px;
}
.con_Main_right_img>span{
    display: inline-block;
    padding: 0 15px;
    line-height: 32px;
    border: 1px solid #ddd;
    color: rgb(165, 164, 164);
    font-size: 14px;
    cursor: pointer;
}
.con_Main_right_img>span:hover{
    color:#23db9b;
    border-color:#23db9b ;
}
#myTab>.active{
    border-right: 2px solid #00cf8c!important;
}
#myTab>.active>a{
    color: #00cf8c!important;
}
.nav>li>a {
    padding: 10px 10px;
    margin: 10px 0;
}
.el-tab-pane{
    overflow: hidden;
}
.changgeWord{
    font-size: 14px!important;
    color: #00cf8c!important;
}
.changgeWord:hover{
    cursor: pointer;
}
.commit{
    position: relative;
}
.commit1{
    position: absolute;
    top: 4px;
    left: 0;
    opacity: 0;
}
.commit2{
    width: 69px;
    height: 24px;
}
.photo{
    width: 200px;
    height: 200px;
}


</style>